<template>
   <el-form   label-position="right"  label-width="100"  class="form-card"  >
    <div class="form-top">
     <el-form-item label="会员卡名称">
        <el-input placeholder="会员卡名称" v-model="memberCardFormData.name"></el-input>
     </el-form-item>
     <el-form-item label="价格">
        <el-input placeholder="价格" style=" width:80%" v-model="memberCardFormData.price">
            <template #prepend>
             <span>￥</span>
          </template>
          <template #append>
            <span>元</span>
        </template>
        </el-input>
     </el-form-item>
     <el-form-item label="描述信息">
        <el-input type="textarea" v-model="memberCardFormData.description"></el-input>
     </el-form-item>
     <el-form-item label="备注信息">
        <el-input type="textarea" v-model="memberCardFormData.note"></el-input>
     </el-form-item>
     </div>
   
     <div class="form-top">
      <el-form-item label="会员卡类型">
         <el-select placeholder="" v-model="memberCardFormData.type">
            <el-option label="次卡(有限期)" value="0" />
            <el-option label="次卡(无限期)" value="1" />
          </el-select>
      </el-form-item>
      <el-form-item label="可用次数">
         <el-input placeholder="可用次数" class="w50" v-model="memberCardFormData.totalCount"></el-input>
      </el-form-item>
      <el-form-item label="可用天数"  >
         <el-input  placeholder="可用天数" class="w50" v-model="memberCardFormData.totalDay"></el-input>
      </el-form-item>
      <el-form-item label="支持课程">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            size="small"
            @selection-change="handleSelectionChange" >
            <el-table-column type="selection" />
            <el-table-column prop="courseName"  sortable label="课程"  />
            <el-table-column property="count" sortable label="收费情况(次卡)"  >
                <template #default="scope">
                        <span>每节课收取 </span>
                        <el-input style="width: 60px;" v-model="scope.row.count"/>
                        <span> 次/人</span>
                </template>    
            </el-table-column>
        </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  @click="savaMemberCard">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </div>
   </el-form>
</template>

<script setup>
import {ref,toRefs} from 'vue'
const  props = defineProps(['memberCardFormData','addEditDrawer','drawerTitle'])
const  emit  = defineEmits(['update:addEditDrawer'])
const {drawerTitle}=toRefs(props)

//支持课程
const multipleTableRef = ref() //表格
const multipleSelection = ref([]) //多选的选上
//多选 被选中的列保
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

//todo  调用后端接口 获取支持的课程
const tableData = [
    {
        courseName: 'spring FrameWord',
        count:5,
    },
    {
        courseName: 'MySQL',
        count:5, 
    },
   
    {
        courseName: 'JVM原理',
        count:5, 
    },
     {
        courseName: 'Mybatis',
        count: 5,
    },
]

//保存添加或者修改会员开的数据 
const  savaMemberCard  = ()=>{
    console.log('=========添加或者修改会员========')
     ElMessageBox.confirm(
        `确定要${drawerTitle.value}吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //todo调用后端接口 保存
           //判断是添加会员卡还是修改会员卡
           //调用后端接口

            ElMessage({
                type: 'success',
                message: `${drawerTitle.value}成功`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: `取消${drawerTitle.value}操作`,
            })
        })
}
//取消 
const  cancel= ()=>{
    emit('update:addEditDrawer',false)
}
</script >
<style lang="less" scoped>
.form-card{
   width:95%
}
.w50{
    width:50%
}
.form-top{
    // margin-bottom:10px;
    // border:1px solid #e5e5e5;
    border-radius:5px;
    padding:10px 5px;
}  
</style>